<template>
	<div class="yindao">
		<!-- 自定义倒计时圆环 -->
		<div class="countdown-circle" @click="navigateToLogin">
			<svg width="50" height="50" viewBox="0 0 50 50">
				<circle cx="25" cy="25" r="20" fill="none" stroke="#eee" stroke-width="2" />
				<circle cx="25" cy="25" r="20" fill="none" stroke="#FEC868" stroke-width="2" stroke-dasharray="125.6"
					:stroke-dashoffset="dashOffset" transform="rotate(-90 25 25)" />
			</svg>
			<span class="countdown-text">{{ Math.ceil(timeLeft) }}s</span>
		</div>

		<transition>
			<img v-if="timeLeft >= 4" src="@/assets/images/daohang1.png" alt="引导页1" />
			<img v-else-if="timeLeft >= 2" src="@/assets/images/daohang2.png" alt="引导页2" />
			<img v-else src="@/assets/images/daohang3.png" alt="引导页3" />
		</transition>
	</div>
</template>

<script setup>
defineOptions({
	name: 'YindaoPage'
})

import { ref, computed, onUnmounted, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '@/stores/user';

const timeLeft = ref(6);
const router = useRouter();
let animationFrame;
const startTime = Date.now();
const userStore = useUserStore();

// 计算圆环进度
const dashOffset = computed(() => {
	const progress = timeLeft.value / 6;
	return 125.6 * (1 - progress);
});

function navigateToLogin() {
	cancelAnimationFrame(animationFrame);
		router.push('/home');
}

function animate() {
	const now = Date.now();
	const elapsed = now - startTime;
	timeLeft.value = Math.max(6 - (elapsed / 1000), 0);

	if (timeLeft.value > 0) {
		animationFrame = requestAnimationFrame(animate);
	} else {
		navigateToLogin();  // 使用相同的导航逻辑
	}
}

onMounted(() => {
	animationFrame = requestAnimationFrame(animate);
});

onUnmounted(() => {
	cancelAnimationFrame(animationFrame);
});
</script>

<style lang="scss" scoped>
.yindao {
	width: 100vw;
	height: 100vh;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	overflow: hidden;

	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		user-select: none;
		-webkit-user-drag: none;
	}



	span {
		font-size: 20px;
		color: #667446;
	}
}

.countdown-circle {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 10;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;

	circle {
		transition: stroke-dashoffset 0.1s linear;
	}

	.countdown-text {
		position: absolute;
		font-size: 16px;
		color: #FEC868;
		transform: translateY(-1px); // 微调文字位置
	}
}
</style>